<!--
 * @Author: qwlbwm 18370818801qwl./
 * @Date: 2023-09-14 09:09:09
 * @LastEditors: whereamazinghappen 306702547@qq.com
 * @LastEditTime: 2023-10-19 20:14:23
 * @FilePath: \checc-business-module-web-kgpt-dev\src\views\examineManage\boardVIew\zjContribution\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard-container">
    <!-- <div class="title">中咨考核看板</div> -->
    <div class="qwl-row">
      <div class="qwl-col" style="padding-right: 10px">
        <div class="chart-container" ref="zjExeharts" style="width: 100%; height: 100%"></div>
      </div>
      <div class="qwl-col2">
        <div class="table-box">
          <div class="table-title">
            <span class="title-span"
              >考核成绩排名
              <div class="title-divide"></div>
            </span>
            <div class="date-picker">
              <el-date-picker
                v-model="searchFrom.age"
                type="year"
                class="date-pick-qwl"
                value-format="YYYY"
                placeholder="选择年份"
                :clearable="false"
                @change="ageChange"
              />
            </div>
          </div>
          <el-table
            :row-style="rowStyle"
            :cell-style="cellStyle"
            :data="state.table_list"
            style="width: 100%; margin-top: 5px"
          >
            <el-table-column prop="rank" align="center" width="100" label="排名" />
            <el-table-column prop="companyName" align="center" label="单位名称" />
            <el-table-column prop="totalScore" align="center" label="总分" width="100" />
            <el-table-column prop="plusScore" align="center" label="专项附加" width="100" />
          </el-table>
        </div>
      </div>
    </div>
    <!-- <el-row style="height: 100%; padding-top: 20px">
      <el-col :span="14">
        <div ref="zjExeharts" style="width: 100%; height: 100%"></div>
      </el-col>
      <el-col :span="10">
        <div class="table-box">
          <div class="table-title">
            <span class="title-span"
              >考核成绩排名
              <div class="title-divide"></div>
            </span>
            <div class="date-picker">
              <el-date-picker
                v-model="searchFrom.age"
                type="year"
                style="width: 200px"
                value-format="YYYY"
                placeholder="选择年份"
                :clearable="false"
                @change="ageChange"
              />
            </div>
          </div>
          <el-table
            :data="state.table_list"
            height="600px"
            style="width: 100%; margin-top: 5px"
          >
            <el-table-column prop="rank" align="center" width="100" label="排名" />
            <el-table-column prop="companyName" align="center" label="单位名称" />
            <el-table-column prop="totalScore" align="center" label="总分" width="100" />
            <el-table-column
              prop="plusScore"
              align="center"
              label="专项附加"
              width="100"
            />
          </el-table>
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import * as api from '@/views/examineManage/api/boardView'
import { windowResize } from '@/views/common'
import * as echarts from 'echarts'
import { fontSizeRem } from '@/utils/utils'
const zjExeharts = ref()
const searchFrom = reactive({
  //查询
  age: '',
})
// const refreshPage:any=inject('refreshPage', Function, true);
// let annualId=route.query.id;

let myEharts

const onResizeHandler = () => {
  windowResize(100, () => {
    myEharts.resize()
  })
}

onMounted(() => {
  myEharts = echarts.init(zjExeharts.value)
  doHandleYear()
  gettargetlist()
  window.addEventListener('resize', onResizeHandler, false)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResizeHandler, false)
})

let state = reactive<any>({
  table_list: [],
  myEharts: null,
})
const initEcharts = () => {
  let xdata: Array<string> = []
  let ydata: Array<string> = []
  let ydata2: Array<string> = []
  for (let i = 0; i < state.table_list.length; i++) {
    xdata.push(state.table_list[i].companyName)
    ydata.push(state.table_list[i].totalScore)
    ydata2.push(state.table_list[i].plusScore)
  }

  myEharts.setOption({
    title: {
      text: `各单位${searchFrom.age}年度考核情况`,
      left: 'center',
      padding: 20,
      textStyle: {
        fontSize: 20,
        color: '#FFF',
      },
    },
    grid: {
      left: '6%',
      right: '6%',
      bottom: '30',
      containLabel: true,
    },
    legend: {
      itemWidth: 14,
      data: ['总分', '专项附加'],
      bottom: '0',
      textStyle: {
        fontSize: 12,
        color: '#FFF',
      },
    },
    xAxis: {
      type: 'category',
      data: xdata,
      // nameTextStyle: {
      //   color: '#FFF',
      // },
      name:'年份',
      axisLine: {
        show: true,
        lineStyle: { color: '#283460' }
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(131,101,101,0.2)',
          type: 'dashed',
        },
      },
      axisLine: {
        show: true,
        lineStyle: { color: '#283460' }
      },
      name:'得分',
    },
    color:['#5470C6','#9C356F'],
    series: [
      {
        name: '总分',
        data: ydata,
        type: 'bar',
        barMaxWidth: 50,
        label: {
          show: true,
          position:'top',
        },
        barWidth: fontSizeRem(0.3),
        itemStyle: {
          // color: '#C7A746',
          color: function (params) {
            //展示正值的柱子，负数设为透明
            let colorArr = params.value > 0 ? ['#5470C6', '#08103B'] : ['#08103B', '#5470C6']
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: colorArr[0], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: colorArr[1], // 100% 处的颜色
                },
              ],
              false
            )
          },
          barBorderRadius: [30, 30, 0, 0],
        },
      },
      {
        name: '专项附加',
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: ydata2,
        barMaxWidth: 50,
        label: {
          show: true,
          position:'top',
        },
        itemStyle: {
          color: function (params) {
            //展示正值的柱子，负数设为透明
            let colorArr = params.value > 0 ? ['#9C356F', '#08103B'] : ['#08103B', '#9C356F']
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: colorArr[0], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: colorArr[1], // 100% 处的颜色
                },
              ],
              false
            )
          },
        },
        barWidth: fontSizeRem(0.3),
      },
    ],
  })
}
const ageChange = () => {
  gettargetlist()
}
const doHandleYear = () => {
  var myDate = new Date()
  searchFrom.age = myDate.getFullYear() + ''
}

const gettargetlist = () => {
  //获取table列表
  api.myExamineStatisticRequest(searchFrom).then((res) => {
    state.table_list = res.data.data
    initEcharts()
  })
}
const rowStyle = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return { backgroundColor: 'transparent' }
  } else {
    return { backgroundColor: 'rgb(34,58,110)' }
  }
}
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.property === 'totalScore') {
    return { color: 'green' }
  }
  if (column.property === 'plusScore') {
    return { color: 'red' }
  }
}
</script>
<style lang="scss" scoped>
@import '../boardCss.scss';
.qwl-col2 {
  :deep(.el-table__fixed-right tbody tr:hover > td) {
    background-color: transparent;
  }
  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background-color: transparent;
  }
  :deep(.el-table::before) {
    height: 0;
  }
  :deep(.el-table) {
    background-color: transparent;
    color: white;
    .el-table__header thead tr th {
      background-color: rgb(8, 27, 86);
      color: rgba(255, 255, 255, 0.8);
      font-size: 16px;
      font-weight: 650;
    }
    td,
    th.is-leaf {
      border: none;
      font-size: 16px;
      font-weight: 400;
    }
    .tbody tr:hover > td {
      background-color: transparent;
    }
    .el-table__body tr.hover-row > td {
      background-color: transparent;
    }
  }
}
</style>
